<template>
  <div class="as-date-pick__body">
    <table>
      <tbody>
        <tr>
          <th>日</th>
          <th>一</th>
          <th>二</th>
          <th>三</th>
          <th>四</th>
          <th>五</th>
          <th>六</th>
        </tr>
        <tr v-for="(item,rowIndex) in 6"
            :key="rowIndex">
          <td v-for="(item,colIndex) in 7"
              :key="colIndex">
            <span class="num"
                  @click="tabItem(visible,visible.dateList[rowIndex*7+colIndex])"
                  :class="[{
                    today: +now.day === +visible.dateList[rowIndex*7+colIndex].value
                        && +visible.month === +now.month && +visible.year === +now.year,
                    active: +active.day === +visible.dateList[rowIndex*7+colIndex].value
                        && +visible.month === +active.month && +visible.year === +active.year
                        && visible.dateList[rowIndex*7+colIndex].type==='show',
                  },visible.dateList[rowIndex*7+colIndex].type]">
              {{visible.dateList[rowIndex*7+colIndex].value}}
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  name: "AsDatePickBody",
  data() {
    return {
      index: 1
    };
  },
  props: {
    visible: Object,
    now: Object,
    active: Object
  },
  methods: {
    tabItem(item, day) {
      if (day.type === "prev") {
        this.visible.changeMonth(-1);
      } else if (day.type === "suff") {
        this.visible.changeMonth();
      }

      this.active.setDate(item.year, item.month, day.value);

      this.$emit("change");
    }
  }
};
</script>
